<template>
    <p-card>

        <p-table bordered :columns="tableColumns" :dataSource="tableData">
            <template slot="fileSlot" slot-scope="text">
                <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
                <div v-else>
                    <p-button
                            type="primary"
                            style="margin-right: 16px;"
                            @click="uploadFile(text)"
                    > <p-icon type="download" />下载</p-button>

                </div>


            </template>

            <template slot="fileSlot2" slot-scope="text">
                <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
                <div v-else>

                    <p-button
                            type="primary"
                            style="margin-right: 16px;"
                            @click="openPhotoBtn(text)"
                    > <p-icon type="eye" />预览</p-button>
                </div>




            </template>
        </p-table>
        <p-tabs default-active-key="1" >
            <p-tab-pane key="1" tab="产品/物料明细">
                <p-table bordered :columns="detailTableColumns" :dataSource="tableData[0].details">

                </p-table>
            </p-tab-pane>
        </p-tabs>


        <p-tabs default-active-key="first">
            <p-tab-pane key="first" tab="流程记录">
                <p-table bordered :columns="recordColumns" :dataSource="recordData">

                </p-table>
            </p-tab-pane>
            <p-tab-pane key="second" tab="流程图" force-render>
                <div class="processPreview" >
                    <iframe class="iframCom" v-if="curUrl" :src="curUrl" frameborder="0"></iframe>
                </div>

               <!-- <iframCom :process-instance-id="processInstanceId" />-->
            </p-tab-pane>
        </p-tabs>

        <p-row></p-row>
        <p-descriptions title="流程处理" bordered v-if="tableData[0].status==2">
            <p-descriptions-item label="操作" :span="3">
                <p-radio-group name="radioGroup" v-model="result">
                    <p-radio value="process_over">
                        同意
                    </p-radio>
                    <p-radio value="task_reject">
                        驳回
                    </p-radio>
                </p-radio-group>
            </p-descriptions-item>

            <p-descriptions-item label="处理意见" :span="3">
                <p-textarea
                        v-model="value"
                        placeholder="请输入内容"
                        :auto-size="{ minRows: 3, maxRows: 5 }"
                        style="width:70%;margin-right: 10px"
                />
                <p-button type="primary" style="width:70px;height:70px" @click="submitData">提交</p-button>
            </p-descriptions-item>
        </p-descriptions>




        <div>
            <p-modal v-model="photoVisible" title="图片预览(非图片文件无法预览-需下载)" :footer="null" >
                <img :src="photoUrl" class="myImg"/>
            </p-modal>
        </div>


        <p-modal v-model="resultVisible" title="Basic Modal" :footer="null" :closable="false">
            <p-result
                    status="success"
                    title="处理完成！"
                    :sub-title="resultSubTitle"
            >
                <template #extra>

                </template>
            </p-result>
        </p-modal>

    </p-card>
</template>

<script>
    import { postAction, getAction, deleteAction } from "@/api/manage";
    import { JeecgListMixin } from "@/mixins/JeecgListMixin";
    import { api ,putAction } from "@/api/manage";
    import JSuperQuery from "@/components/jeecg/JSuperQuery.vue";
    import { filterObj } from "@/utils/util";
    import MesQcQualityFileManagementModal from "./modules/MesQcQualityFileManagementModal";
    import Vue from "vue";
    import moment from 'moment';
    import process from '@/api/process';
    import  dayjs   from 'dayjs'
    export default {
        name: "MesQcFileApproval",
        data(){
            return {
                value:'',
                photoUrl:'',
                result:'process_over',
                curUrl: '',
                photoVisible:false,
                resultVisible:false,
                resultSubTitle:'',
                processInstanceId:0,
                activeName:'first',
                detailTableColumns:[
                    {
                        title: "序号",
                        dataIndex: "",
                        key: "rowIndex",
                        width: 60,
                        align: "center",
                        customRender: function (t, r, index) {
                            return parseInt(index) + 1;
                        },
                    },
                    {
                        title: "产品编码",
                        align: "center",
                        dataIndex: "mcode",
                    },
                    {
                        title: "产品名称",
                        align: "center",
                        dataIndex: "mname",
                    },
                    {
                        title: "创建者",
                        align: "center",
                        dataIndex: "createBy",
                    },

                    {
                        title: "创建日期",
                        align: "center",
                        dataIndex: "createTime",
                    },
                ],
                detailTableData:[],
                recordColumns:[
                    {
                        title: "创建时间",
                        align: "center",
                        dataIndex: "startTime",
                    },
                    {
                        title: "处理时间",
                        align: "center",
                        dataIndex: "endTime",
                    },
                    {
                        title: "节点名称",
                        align: "center",
                        dataIndex: "activityName",
                    },
                    {
                        title: "执行人",
                        align: "center",
                        dataIndex: "assigneeName",
                    },
                    {
                        title: "操作",
                        align: "center",
                        dataIndex: "operator",
                    },
                    {
                        title: "处理意见",
                        align: "center",
                        dataIndex: "comment",
                    },
                ],
                recordData:[],
                tableData:[],
                tableColumns:[
                    {
                        title: "文件编码",
                        align: "center",
                        dataIndex: "fileCode",
                    },

                    {
                        title: "文件名称",
                        align: "center",
                        dataIndex: "fileName",
                    },

                    {
                        title: "文件类型",
                        align: "center",
                        dataIndex: "fileType",
                        customRender: (text) => {
                            if (!text) {
                                return "";
                            } else {
                                return this.fileTypeMap[text]?this.fileTypeMap[text].title:'';
                            }
                        },
                    },

                    {
                        title: "文件版本",
                        align: "center",
                        dataIndex: "fileVersion",
                    },

                    {
                        title: "创建者",
                        align: "center",
                        dataIndex: "createBy",
                    },

                    {
                        title: "创建日期",
                        align: "center",
                        dataIndex: "createTime",
                    },

                    {
                        title: "修改者",
                        align: "center",
                        dataIndex: "updateBy",
                    },

                    {
                        title: "修改时间",
                        align: "center",
                        dataIndex: "updateTime",
                    },

                    {
                        title: "备注",
                        align: "center",
                        dataIndex: "remarks",
                    },

                    {
                        title: "文件下载",
                        align: "center",
                        dataIndex: "fileUrl",
                        scopedSlots: { customRender: "fileSlot" },
                    },
                    {
                        title: "文件预览",
                        align: "center",
                        dataIndex: "fileUrl",
                        scopedSlots: { customRender: "fileSlot2" },
                    },
                ],

                fileTypeList:[],
                fileTypeMap:[],


            };

        },

        computed: {

        },

        created() {
            this.initFileTypeList();
            this.initTableData()
            this.queryRecord();
            this.getProcessPicture();
        },

        methods: {
            moment,
            //封装listToMap
            listToMap(list,name){
                let map = {};
                for(let i in list){
                    map[list[i][name]] = list[i];
                }
                return map;
            },

            getProcessPicture(){
                process.getProcessPicture(this.$route.query.processInstanceId).then( res =>{
                    this.curUrl = res.data;
                    // this.curUrl = 'http://localhost/index.html?processInstanceId=380001&processDefinitionId=XSSL:1:372582';
                })
            },
            initTableData(){//this.$route.query.processInstanceId
                getAction('/mes-quality/mesQcQualityFileManagement/getByProcessId/'+this.$route.query.processInstanceId).then(res=>{
                    if(res.success){
                        let data = res.data;
                        console.log(moment(data.createTime,'YYYY-MM-dd HH:mm'))
                        data.createTime = dayjs(data.createTime).format('YYYY-MM-DD HH:mm');
                        data.updateTime = dayjs(data.updateTime).format('YYYY-MM-DD HH:mm');
                        data.key = 1;
                        let dataList = [];
                        dataList.push(data);
                        this.tableData = dataList;
                        this.activeName = this.$route.query.activeName;
                        this.processInstanceId = this.$route.query.processInstanceId;

                    }else{
                        this.$message.warning(res.msg);
                    }
                })
            },
            uploadFile(text){
                if (!text) {
                    this.$message.warning('未知的文件')
                    return
                }
                window.open(JSON.parse(text)[0].filePath)
            },
            openPhotoBtn(text){



                let obj = JSON.parse(text);

                if(obj&&obj.length>0){

                    let filePath = obj[0].filePath;
                    filePath = filePath.substring(filePath.indexOf('=')+1)
                    this.photoUrl = filePath;
                }

                this.photoVisible=true;


            },
            initFileTypeList(){
                //quality_file_type
                getAction('/basic-business/sys/dict/queryDictItemsByCode',{dictCode:'quality_file_type'}).then(res=>{
                    if(res.success){
                        this.fileTypeList = res.data;
                        this.fileTypeMap = this.listToMap(this.fileTypeList,'value');
                    }
                })
            },

            queryRecord(){
                getAction('/poros-bpmengine/task/getTaskRecordList/?processInstanceId='+this.$route.query.processInstanceId).then(res=>{
                    if(res.success){
                        let data = res.data;
                        let key = 1;
                        data.forEach(item=>{
                            item.key =key;
                            key = key+1;
                        })
                        this.recordData = data;
                    }else{
                        this.$message.warning(res.msg);
                    }
                })
            },

            submitData(){

                let flag = true;

                if(this.result == 'task_reject'){
                    if(this.value==''){
                        flag = false;
                        this.$message.error('驳回时必须填写处理意见！');
                    }
                }

                if(flag){
                    let data = {
                        changeType:this.result,
                        processInstanceId:this.$route.query.processInstanceId,
                        taskId:this.$route.query.taskId,
                        opinion:this.value,
                    }
                    postAction('/mes-quality/mqQualityFile/callback',data).then(res=>{
                        if(res.success){
                            this.resultVisible = true;
                            this.timeReset(5);
                        }else{
                            this.$message.warning(res.msg);
                        }
                    })
                }

            },

            timeReset(time){
                if(time == 0) {
                    window.close();
                } else {
                    let that = this;
                    this.resultSubTitle = "本页面将于 " + time + " 秒后自动关闭"
                    time--;
                    setTimeout(function () {
                            that.timeReset(time);
                        },
                        1000);
                }
            },



        },
    }
</script>

<style scoped>

</style>